<template>
    <div class="web-divider">
        <div class="divider-header">
            <div class="header-liner">
                <span>{{title}}</span>
            </div>
        </div>
        <div class="divider-content">
            <slot></slot>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'm-divider',
        props: {
            title: {
                type: String,
                required: true
            }
        }
    }
</script>

<style lang="less" scoped>
    @import '../assets/less/Var.less';

    .web-divider {
        .divider-header {
            position: relative;
            height: 25px;
            line-height: 25px;
            .header-liner {
                position: absolute;
                top: 50%;
                left: 0px;
                width: 100%;
                height: 0px;
                border-bottom: 1px solid @border-color;
                span {
                    position: absolute;
                    display: inline-block;
                    left: 30px;
                    top: 50%;
                    transform: translateY(-50%);
                    padding: 0px 10px;
                    font-size: 14px;
                    background: white;
                }
            }
        }
        &:hover {
            .divider-header .header-liner span::after {
                content: '#';
                color:#eb6a4b;
                font-size: 16px;
                padding-left:5px;
                font-weight: 600;
            }
        }
        .divider-content{
            padding:15px 0px;
        }
    }
</style>